<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例——监视属性</title>
    <script src="../../js/vue.js"></script>
</head> 
<body>
    <div id="root">

        <!--     
            监视属性watch：
                1、当被监视属性发生变化时，回调函数handler自动调用，进行相关操作
                2、监视的属性必须存在vm上，才能进行监视！ 
                3、监视的两种写法：
                    1、new vue时  卸载watch配置里
                    2、vm.$watch('info',{})监视 -->
        <h1>欢迎来到 {{name}} 学习</h1>
        <h1>今天天气很{{info}}</h1>

        <!-- @xxx='yyy' xxx事件， yyy可以写一些简单的执行语句，不用写方法 -->

        <!-- <button @click='changeWearth>点击切换天气</button> -->

        <!-- 简写 在语句短的情况下，可简写-->
        <button @click='isHot = !isHot'>点击切换天气</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                'name': '尚硅谷',
                'isHot': true
            },
            
            // 计算属性  配置对象
            computed: {
                info(){
                    return this.isHot ? '炎热':'凉爽'
                }
            },

            // 监视属性 配置对象
            watch: {
                isHot:{
                    // 函数, 当isHot发生改变时  执行此函数
                    handler(newVal, oldVal){
                        console.log(newVal, oldVal)
                    },
                    immediate: true // 初始化时  让handler函数就执行
                }
            }
        })  
    </script>
</body> 
</html>